//out: ../css/
@import './base';

@vw:3.75vw;
@color:#fb7299;

.width(@w) {
    width: (@w/@vw);
}

.height(@h) {
    height: (@h/@vw);
}

.font-size(@fz: (16/@vw)) {
    font-size: (@fz/@vw);
}

.line-height(@lh) {
    line-height: (@lh/@vw);
}

.margin(@top, @right, @bottom, @left) {
    margin: (@top/@vw) (@right/@vw) (@bottom/@vw) (@left/@vw);
}

.margin-left(@left) {
    margin-left: (@left/@vw);
}

.margin-right(@right) {
    margin-right: (@right/@vw);
}

.margin-top(@top) {
    margin-top: (@top/@vw);
}

.margin-bottom(@bottom) {
    margin-bottom: (@bottom/@vw);
}

.padding(@top, @right, @bottom, @left) {
    padding: (@top/@vw) (@right/@vw) (@bottom/@vw) (@left/@vw);
}

.padding-top(@top) {
    padding-top: (@top/@vw);
}

.padding-right(@right) {
    padding-right: (@right/@vw);
}

.padding-bottom(@bottom) {
    padding-bottom: (@bottom/@vw);
}

.padding-left(@left) {
    padding-left: (@left/@vw);
}

.border(@width: (1/@vw), @color: #000, @line: solid) {
    border: (@width/@vw), @color, @line;
}

.border-radius(@radius) {
    border-radius: (@radius/@vw);
}

.top(@top:0) {
    top: (@top/@vw);
}

.left(@left:0) {
    left: (@left/@vw);
}

.right(@right:0) {
    right: (@right/@vw);
}

.bottom(@bottom:0) {
    bottom: (@bottom/@vw);
}

header {
    position: fixed;
    z-index: 666;
    background-color: #fff;
    .head-top {
        .height(44);
        .padding(0, 12, 0, 18);
        display: flex;
        justify-content: space-between;
        align-items: center;
        .width(375);
    
        .head-left {
            // flex: 1;
            img {
                .width(66);
                .height(30);
            }
        }
    
        .head-right {            
            .width(160);
            display: flex;
            align-items: center;
            justify-content: space-between;
            z-index: 999;
    
            a {
                display: block;
                .width(24);
                .height(24);
                .border-radius(12);
                .font-size(8);
                text-align: center;
                .line-height(24);
                color: @color;
                background-color: #e7e7e7;
            }
    
            img {
                .width(72);
                .height(24);
            }
    
            .ic_search_tab {
                .font-size(20);
            }
        }
    }
    .head-by {
        .width(375);
        // overflow: hidden;
        overflow: auto;


        &::-webkit-scrollbar {
            .width(0);
            .height(0);
            // background-color: #F5F5F5;
        }
        position: relative;
        .nav {
            flex-wrap: nowrap;
            // position: relative;
            
            .width(720);
            .general_pulldown_s {
                .font-size(20);
                .height(40);
                .line-height(45);
                background-color: #fff;     
                position: fixed;
                // margin: 0;
                .right(0);
                .padding-right(5);
            }


            li {
                // .width(60);
                .height(40);
                .line-height(40);
                .padding(0, 16, 0, 16);

                a {
                    color: #505050;
                    .font-size(14);
                }
            }
        }
    }
}

.main {
    .padding-top(84);
    // .height(2000);
    // scrollbar-width: none;
    //     /* Firefox */
    .width(375);
    // background-color: @color;
    ul {
        display: flex;
        flex-wrap: wrap;
        .padding(10,10,10,10);

        & li:nth-child(odd) {
            .margin-right(10);
            .margin-bottom(10);
        }
        li {
            .width(172);
            .font-size(14);

            .item-title {
                    overflow: hidden;
                    text-overflow: ellipsis;
                    -webkit-line-clamp: 2;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    // .height(40);
                }
            .item-img {
                
                .width(172);

                position: relative;
                img {
                    .width(172);
                    .height(97);
                    object-fit: contain;
                    .border-radius(3);
                }
                
                .item-info {
                    display: flex;
                    position: absolute;
                    .left();
                    .bottom();
                    width: 100%;
                    .height(28);
                    align-items: center;
                    .padding-left(5);
                    .padding-right(6);
                    color: #fff;
                    .font-size(14);
                    justify-content: space-between;
                    background-image: linear-gradient(0deg, rgba(0, 0, 0, .85), transparent);
                    .border-radius(3);
                    overflow: hidden;
                    .iconfont {
                        .font-size(14);
                    }
                    
                }
            }
        }
    }
}

footer {
    position: fixed;
    left: 50%;
    .bottom(50);
    transform: translateX(-50%); 
    .width(351);
    .height(38);
    background-color: @color;
    .border-radius(19);
    text-align: center;
    .line-height(38);
    .font-size(14);
    color: #fff;
    span {
        color: #fff;
        .margin-right(10);
    }
}
